<template>
  <div class="remoteOverBox">
    <div class="mapBox" ref="mapBox" @mousedown="startDrag" @mousemove="dragging" @mouseup="stopDrag">
      <div class="moveBox"></div>
      <div id="container"></div>
    </div>
    <!-- 上 -->
    <div class="remoteOver">
      <div class="statusBarBox">
        <!-- 机场名称 -->
        <div class="nameAirportBox">
          <div class="img">
            <img src="@/assets/icons/remoteOver/statusBar_icon01.png" />
          </div>
          <div class="Title"> {{ navInform.airportName }} </div>
        </div>
        <!-- 飞机状态 -->
        <div class="flightStateBox">
          <div class="StateTitle">{{ ['待机', '起飞准备', '起飞准备完毕', '手动飞行', '自动起飞', '航线飞行', '全景拍照', '智能跟随',
            'ADS-B躲避', '自动返航', '自动降落', '强制降落', '三桨叶降落', '升级中', '未连接', 'APAS', '虚拟摇杆状态', '指令飞行'][navInform.modeCode] }}
          </div>
          <div class="ericLine"></div>
          <div class="StateName">{{ navStatusData?.contactName || '---' }}</div>
        </div>

        <div class="aircraftModelBox">
          <div class="img">
            <img src="@/assets/icons/remoteOver/statusBar_icon02.png" alt="">
          </div>
          <div class="text">{{ navInform.deviceName }}</div>
        </div>

        <div class="aircraftModelBox2">
          <div class="img">
            <img src="@/assets/icons/remoteOver/statusBar_icon03.png">
          </div>
          <div class="text">挂载型</div>
        </div>

        <div class="taskPerformBox">
          <div class="img">
            <img src="@/assets/icons/remoteOver/statusBar_icon04.png">
          </div>
          <div class="text">2023.08.02 第二周城市周巡查任</div>
        </div>

        <div class="cityInspectRoutBox">
          <div class="img">
            <img src="@/assets/icons/remoteOver/statusBar_icon05.png">
          </div>
          <div class="text">城市巡查航线</div>
        </div>


        <div class="navInformBox">
          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon01.png" />
            </div>
            <div class="Text">{{ navInform.sdr_quality }}</div>
          </div>

          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon02.png" />
            </div>
            <div class="Text">{{ navInform.gps_number }}</div>
            <!-- 搜星数量 -->
          </div>

          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon03.png" />
            </div>
            <div class="Text">{{ navInform.height }}</div>
            <!-- 相对地面高度 -->
          </div>

          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon04.png" />
            </div>
            <div class="Text">{{ navInform.relativeHeight }}</div>
            <!-- 相对地面高度 -->
          </div>

          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon05.png" />
            </div>
            <div class="Text">{{ navInform.homeDistance }}</div>
          </div>

          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon06.png" />
            </div>
            <div class="Text">{{ navInform.verticalSpeed }}</div>
          </div>

          <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/drone_icon07.png" />
            </div>
            <div class="Text">{{ navInform.horizontalSpeed }}</div>
          </div>

          <!-- <div class="navInform">
            <div class="Img">
              <img src="@/assets/icons/remoteOver/statusBar_icon11.png" />
            </div>
            <div class="Text">{{ navInform.storage }}</div>
          </div> -->
        </div>

        <div class="batteryInformBox">
          <div class="batteryBox">
            <div class="battery">
              <div :style="{ width: navInform.capacity_percent + '%' }" class="progress"></div>
            </div>
            <div class="head"></div>
          </div>
          <div class="electroQuantity">
            {{ navInform.capacity_percent + '%' }}
          </div>
        </div>

      </div>
      <div class="flightSchedule">
        <div class="progressTwo"></div>
        <div class="progress"></div>
      </div>
    </div>

    <div class="quitBox" @click="exitButton">
      <img src="@/assets/icons/remoteOver/quit_icon_hover.png" alt="">
    </div>

    <div class="photoVideoRecordBox">
      <div
        :class="navInform.recording_state == '1' ? 'videoRecordBoxActive videoRecordBox' : 'videoRecordBox videoRecordBoxNormal'"
        @click="videoRecord">
        <div class="img">
          <img src="@/assets/icons/remoteOver/droneOverButton_icon10.png" />
        </div>
        <div class="text">录像</div>
        <div class="badge" :style="{ background: navInform.recording_state == '1' ? '#42ffca' : '#687078' }"></div>
      </div>
      <div class="pictureBox" @click="picture">
        <div class="img">
          <img src="@/assets/icons/remoteOver/statusBar_icon03.png" />
        </div>
        <div class="text">
          照相
        </div>
      </div>
    </div>

    <div class="dronePictureTwo">
      <div class="toggleButton" @click="fullScreenVideo"></div>
      <div id="liveBroadcastPictureTwo" class="liveBroadcastPictureTwo">
        <Jessibuca :videoUrl="liveInformTwo.liveUrl" @LiveInterrupt="LiveInterrupt" />
      </div>
    </div>

    <div class="cameraModeBox">
      <div class="cameraMode" :class="{ 'cameraModeBg': currentCamera == 'wide' }" @click="switchCamera('wide')">
        <img src="@/assets/icons/remoteOver/camera_icon01.png" />
        <div class="text">广角</div>
      </div>

      <div class="cameraMode" :class="{ 'cameraModeBg': currentCamera == 'zoom' }" @click="switchCamera('zoom')">
        <img src="@/assets/icons/remoteOver/camera_icon03.png" />
        <div class="text">变焦</div>
      </div>

      <div class="cameraMode" :class="{ 'cameraModeBg': currentCamera == 'ir' }" @click="switchCamera('ir')">
        <img src="@/assets/icons/remoteOver/camera_icon02.png" />
        <div class="text">红外</div>
      </div>
    </div>

    <div class="emergeStopReturnBox">
      <div class="suddenStop" @click="aircraftEmergeStop">
        <div class="img">
          <img src="@/assets/icons/remoteOver/droneOverButton_icon11.png" alt="">
        </div>
        <div class="text">急停</div>
      </div>
      <div class="returnVoyage" @click="returnHome">
        <div class="img">
          <img src="@/assets/icons/remoteOver/droneOverButton_icon12.png" alt="">
        </div>
        <div class="text">返航</div>
      </div>
    </div>
    <!-- 中 -->
    <div class="dronePicture">
      <div id="liveBroadcastPicture" class="liveBroadcastPicture">
        <!-- <LivePlayer :videoUrl="liveInform.liveUrl" :controls="false" :muted="false" :autoplay="true" aspect="fullscreen"
          live /> -->
        <Jessibuca :videoUrl="liveInform.liveUrl"></Jessibuca>
      </div>
    </div>
    <!-- 下 -->
    <div class="BottomControlBox">
      <div class="ControlLeft" :class="{ 'disabledCursor': lock }">
        <div class="buttonPicture" :class="{ 'disabled': lock }" @click="returnRout">
          <!-- 回归航线 -->
          <img src="@/assets/icons/remoteOver/droneOverButton_icon01.png" alt="">
        </div>

        <div class="buttonPicture" :class="{ 'disabled': lock }" @click="cameraZoom">
          <!-- 变焦 -->
          <img src="@/assets/icons/remoteOver/droneOverButton_icon02.png" alt="">
        </div>

        <transition name="fade">
          <div class="zoomBox" v-show="zoomPop">
            <div class="text">变焦</div>
            <div class="zoomInp">
              <a-input @change="SliderChange" v-model:value="zoomMultiple" />
            </div>
            <div class="zoomSlider">
              <a-slider @change="SliderChange" v-model:value="zoomMultiple" :min="2" :max="200" :step="6" vertical />
            </div>
          </div>
        </transition>


        <div class="buttonPicture" :class="{ 'disabled': lock }" @click="resetHead">
          <!-- 重置云台 -->
          <img src="@/assets/icons/remoteOver/droneOverButton_icon03.png" alt="">
        </div>
      </div>

      <div class="ControlCentre">
        <div class="controlBox">
          <!-- 左摇杆 -->
          <div class="leftStickBox">
            <div ref="joystickContainer" class="custom-joystick-container"></div>
          </div>
          <!-- 左飞机高度 -->
          <div class="aircraftAltitudeBox">
            <div class="smallPlaneIcon">
              <img src="@/assets/icons/remoteOver/smallPlane_icon01.png" />
            </div>
            <div class="speed" :class="{ 'speedSelect': heightBlock == 3 }" @click="aircraftAltitude(3)">高速</div>
            <div class="speed" :class="{ 'speedSelect': heightBlock == 2 }" @click="aircraftAltitude(2)">中速</div>
            <div class="speed" :class="{ 'speedSelect': heightBlock == 1 }" @click="aircraftAltitude(1)">低速</div>
          </div>

          <!-- 中间的圆盘 -->
          <div class="directBox" :style="{ transform: 'rotate(' + attitudeHead + 'deg)' }">
            <img src="@/assets/icons/remoteOver/droneOverButton_icon08.png" alt="">
          </div>
          <div class="smallPlaneBox">
            <img src="@/assets/icons/remoteOver/droneOverButton_icon09.png" alt="">
            <div class="angl">{{ attitudeHead }}°</div>
          </div>
          <!-- end---- 中间的圆盘 -->

          <!-- 右飞机角度 -->
          <div class="aircraftAnglBox">
            <div class="smallPlaneIcon">
              <img src="@/assets/icons/remoteOver/smallPlane_icon02.png" />
            </div>
            <div class="speed" :class="{ 'speedSelect': aircraftAnglBlock == 3 }" @click="aircraftAngl(3)">高速</div>
            <div class="speed" :class="{ 'speedSelect': aircraftAnglBlock == 2 }" @click="aircraftAngl(2)">中速</div>
            <div class="speed" :class="{ 'speedSelect': aircraftAnglBlock == 1 }" @click="aircraftAngl(1)">低速</div>
          </div>

          <div class="rigthStickBox">
            <div ref="joystickContainerTwo" class="custom-joystick-container"></div>
          </div>

        </div>

        <div class="lockRemoteControlBox" v-show="lock">
          <div class="unlockBox" @click="unlockButton">
            <img src="@/assets/icons/remoteOver/droneOverButton_icon04.png" />
          </div>
        </div>
      </div>

      <div class="ControlRigth" :class="{ 'disabledCursor': lock }">
        <div class="buttonPicture" :class="{ 'disabled': lock }" @click="lockButton">
          <!-- 锁定遥控器 -->
          <img src="@/assets/icons/remoteOver/droneOverButton_icon04.png" alt="">
        </div>

        <div class="buttonPicture" :class="{ 'disabled': lock }" @click="takeOff">
          <!-- 一键起飞 -->
          <img src="@/assets/icons/remoteOver/droneOverButton_icon05.png" alt="">
        </div>

        <div class="buttonPicture" :class="{ 'disabled': lock }">
          <img src="@/assets/icons/remoteOver/droneOverButton_icon06.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, unref, onUnmounted } from 'vue'
import Nipple from "nipplejs";
import { shadowGet, drcControl, modeEnter, instructPost, instructTakeoff, startLive, list, stopLive, setLen, modeExit } from "./data.api"
import AMapLoader from "@amap/amap-jsapi-loader";
import LivePlayer from '@liveqing/liveplayer-v3' // vue3
import { useRoute, useRouter } from "vue-router";
import aircraft_icon1 from '@/assets/icons/flightTrajectory/aircraft_icon.png'
import aircraft_icon2 from '@/assets/icons/flightTrajectory/aircraft_icon2.png'
import coordtransform from 'coordtransform';
import Jessibuca from './Jessibuca.vue';
// import { useMyWebSocket, connectWebSocket, onWebSocket } from '@/hooks/web/useWebSocket.ts'
// import { getToken } from '/@/utils/auth';
// import md5 from 'crypto-js/md5';
// import { useUserStore } from '/@/store/modules/user';

const router = useRoute()
const joystickContainer = ref(null)
const joystick = ref(null)
const routerR = useRouter()

const joystickContainerTwo = ref(null)
const joystickTwo = ref(null)

const isJoystickActive = ref(false);

let seq = ref(0)//执行次数

let lock = ref(true) // 遥控器是否锁定

let navStatusData = ref()
let data = ref()

let device = reactive({
  id: router.query.deviceId,
  sn: router.query.deviceSn,
  droneId: router.query.droneId
})

let map = null;
let marker = ref()

//地图div拖动
const isDragging = ref(false);
const startOffset = ref({ x: 0, y: 0 });
const mapBox = ref(null);
//end地图div拖动


let payload_index = ref() //相机控制权标识 相机id
let rockerDirect = ref() //摇杆方向

let rockerDirectTwo = ref() //摇杆方向

let heightBlock = ref(2) // 飞机高度挡位
let aircraftAnglBlock = ref(2)

let attitudeHead = ref() //飞机角度

let aircraftControl = reactive({
  deviceId: router.query.deviceId,
  deviceSn: router.query.deviceSn,
  reqId: '',
})

let aircraftCardin = ref([]) //飞行器坐标 获取飞行轨迹

let zoomMultiple = ref() //变焦倍数
let zoomPop = ref(false)
let currentCamera = ref() //当前相机 1广角 2变焦 3红外

let navInform = reactive({
  capacity_percent: '', // 电池电量
  sdr_quality: '', //信号
  environment_temperature: '', //温度
  gps_number: '', //搜星数量
  homeDistance: '', //距离 Home 点的距离
  verticalSpeed: '', // 垂直数度
  horizontalSpeed: '',//水平数度
  relativeHeight: 0, // 相对地面高度
  height: '',//海拔高度
  rainfall: '', //降雨量 	{"0":"无雨","1":"小雨","2":"中雨","3":"大雨"}
  wind_speed: '',
  storage: '', //存储容量
  deviceName: '', //飞机名称
  airportName: '', //机场名称
  modeCode: '', //飞行器状态  {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行"}

  camera_mode: '', //相机模式 {"0":"拍照","1":"录像"}
  recording_state: '', //录像状态	 	{"0":"空闲","1":"录像中"}
})

let liveInform = reactive({ //直播信息
  liveUrl: '',
  deviceLiveId: '' // 直播id
})

let liveInformTwo = reactive({
  liveUrl: '',
  deviceLiveId: '' // 直播id
})

let liveCapacity = ref()
let liveCapacityAirport = ref()//直播能力 机场
let liveCapacitydrone = ref()//直播能力 无人机

let polyline = ref()


const startDrag = (event) => {
  isDragging.value = true;
  startOffset.value = {
    x: event.clientX - mapBox.value.offsetLeft,
    y: event.clientY - mapBox.value.offsetTop,
  };
};

const dragging = (event) => {
  if (isDragging.value) {
    const newX = event.clientX - startOffset.value.x;
    const newY = event.clientY - startOffset.value.y;

    mapBox.value.style.left = `${newX}px`;
    mapBox.value.style.top = `${newY}px`;
  }
};

const stopDrag = () => {
  isDragging.value = false;
};



async function getData() {
  navStatusData.value = await shadowGet(device.droneId) //无人机
  data.value = await shadowGet(device.id) // 机场
  liveCapacity.value = data.value.dockShadow.liveCapacity
  attitudeHead.value = JSON.parse(navStatusData.value.aircraftShadow.attitudeHead).toFixed(2)
  let z = coordtransform.wgs84togcj02(navStatusData.value.aircraftShadow.longitude, navStatusData.value.aircraftShadow.latitude)
  // marker.value.setPosition(z)
  aircraftCardin.value.push(z)

  data.value.dockShadow.liveCapacity.device_list.map(item => {
    if (item.sn == data.value.deviceSn) {
      liveCapacityAirport.value = item
    } else if (item.sn == navStatusData.value.deviceSn) {
      liveCapacitydrone.value = item
      payload_index.value = item.camera_list[1]?.camera_index
    }
  })
  console.log(liveCapacityAirport.value, '机场直播')
  console.log(liveCapacitydrone.value, '无人机直播')
  navInform.modeCode = navStatusData.value.aircraftShadow.modeCode
  navInform.airportName = data.value.deviceName
  navInform.capacity_percent = navStatusData.value.aircraftShadow.battery.capacity_percent
  navInform.sdr_quality = data.value.dockShadow.wirelessLink.wireless_link.sdr_quality
  navInform.environment_temperature = data.value.dockShadow.dockState.environment_temperature + '°C'
  navInform.rainfall = data.value.dockShadow.dockState.rainfall
  navInform.wind_speed = data.value.dockShadow.dockState.wind_speed + 'm/s'
  navInform.storage = `${convertKBToGB(navStatusData.value.aircraftShadow.storage.used)}/${convertKBToGB(navStatusData.value.aircraftShadow.storage.total)}GB`
  navInform.deviceName = navStatusData.value.deviceName
  navInform.gps_number = data.value.dockShadow.dockState.position_state.gps_number + data.value.dockShadow.dockState.position_state.rtk_number
  navInform.homeDistance = JSON.parse(navStatusData.value.aircraftShadow.homeDistance).toFixed(2)
  navInform.verticalSpeed = navStatusData.value.aircraftShadow.verticalSpeed
  navInform.horizontalSpeed = JSON.parse(navStatusData.value.aircraftShadow.horizontalSpeed).toFixed(2)
  navInform.relativeHeight = (navStatusData.value.aircraftShadow.height - data.value.dockShadow.dockState.alternate_land_point.safe_land_height).toFixed(2)
  navInform.height = JSON.parse(navStatusData.value.aircraftShadow.height).toFixed(2)
  // payload_index.value = navStatusData.value.aircraftShadow.payload_index

  // payload_index.value = liveCapacitydrone.value.camera_list[1]?.camera_index
  console.log(payload_index.value, 'payload_index')
}

let timegetFlightParapet: ReturnType<typeof setInterval>;
//获取飞行参数 -- 拿到飞机飞行中的数据
function getFlightParapet() {
  timegetFlightParapet = setInterval(() => {
    getFlight()
    // aircraftCardin.value.push()
  }, 1500)
}

async function getFlight() {

  let res = await shadowGet(device.droneId) //无人机
  let res2 = await shadowGet(device.id)

  navInform.modeCode = res.aircraftShadow.modeCode
  navInform.capacity_percent = res.aircraftShadow.battery.capacity_percent
  navInform.storage = `${convertKBToGB(res.aircraftShadow.storage.used)}/${convertKBToGB(res.aircraftShadow.storage.total)}GB`

  navInform.sdr_quality = res2.dockShadow.wirelessLink.wireless_link.sdr_quality
  navInform.environment_temperature = res2.dockShadow.dockState.environment_temperature + '°C'
  navInform.rainfall = res2.dockShadow.dockState.rainfall
  navInform.wind_speed = res2.dockShadow.dockState.wind_speed + 'm/s'
  navInform.gps_number = res2.dockShadow.dockState.position_state.gps_number + res2.dockShadow.dockState.position_state.rtk_number
  navInform.homeDistance = JSON.parse(res.aircraftShadow.homeDistance).toFixed(2)
  navInform.verticalSpeed = res.aircraftShadow.verticalSpeed
  navInform.horizontalSpeed = JSON.parse(res.aircraftShadow.horizontalSpeed).toFixed(2)
  navInform.relativeHeight = (res.aircraftShadow.height - res2.dockShadow.dockState.alternate_land_point.safe_land_height).toFixed(2)
  navInform.height = JSON.parse(res.aircraftShadow.height).toFixed(2)

  let z = coordtransform.wgs84togcj02(res.aircraftShadow.longitude, res.aircraftShadow.latitude)
  aircraftCardin.value.push(z)
  polyline.value.setPath(aircraftCardin.value)
  marker.value.setPosition(z)

  map.setCenter(z);

  attitudeHead.value = res.aircraftShadow.attitudeHead ? JSON.parse(res.aircraftShadow.attitudeHead).toFixed(2) : 0
  marker.value.setAngle(JSON.parse(res.aircraftShadow.attitudeHead))

}


//开启直播获取飞机或者机场画面
async function startLiveBroadcast() {
  // liveInform.liveUrl = 'wss://nvr-manager.zfiot.net:1443/rtp/34020000001110000001_34020000001320000007.live.flv'
  console.log('开始直播', liveCapacitydrone.value)

  if (liveCapacitydrone.value) {
    let params = {
      deviceId: navStatusData.value.id,  //1716784697489170434
      deviceSn: navStatusData.value.deviceSn,  //4SEDL83001Y21S
      gatewayDeviceSn: data.value.deviceSn,
      // cameraId: liveCapacity.value.device_list[1].camera_list[0].camera_index, //165-0-7  //'53-0-0
      cameraId: liveCapacitydrone.value.camera_list[0].camera_index, //165-0-7  //'53-0-0
      videoIndex: liveCapacitydrone.value.camera_list[0].video_list[0].video_index, //wide-0  normal-0
    }
    await startLive(params).then(res => { //开启直播
      // liveInform.liveUrl = res.livePalyUrl || res.liveUrl.replace('rtmp://', 'http://') + '/hls.m3u8'
      liveInform.liveUrl = res.livePalyUrl.replace('http://', 'ws://').replace('/hls.m3u8', '.live.flv')
      // liveInform.liveUrl = 'wss://nvr-manager.zfiot.net:1443/rtp/34020000001110000001_34020000001320000007.live.flv'
      // liveInform.liveUrl = 'ws://172.30.50.31:89/live/1700208955778.live.flv'
      liveInform.deviceLiveId = res.deviceLiveId
      console.log(liveInform, res, '直播地址1')
    })
  }

  if (liveCapacitydrone.value) {
    let params2 = {
      deviceId: navStatusData.value.id,
      deviceSn: navStatusData.value.deviceSn,
      gatewayDeviceSn: data.value.deviceSn,
      cameraId: liveCapacitydrone.value.camera_list[1].camera_index,
      videoIndex: liveCapacitydrone.value.camera_list[1].video_list[0].video_index,
    }
    await startLive(params2).then(ress => { //开启直播
      // liveInformTwo.liveUrl = ress.livePalyUrl
      liveInformTwo.liveUrl = ress.livePalyUrl.replace('http://', 'ws://').replace('/hls.m3u8', '.live.flv')
      liveInformTwo.deviceLiveId = ress.deviceLiveId
      console.log(liveInformTwo, ress, '直播地址2')
    })
  }
}

async function getDataInit() {
  // await initWebSocket()

  //获取设备信息
  await getData()

  await startLiveBroadcast()


  // heartBeat()
}

function LiveInterrupt() {
  console.log('直播中断')
  startLiveBroadcast()
}

function callbackFunc(cbType, cbParams) {
  console.log(cbType, cbParams)
}

// let timeHeartBeat: ReturnType<typeof setInterval>;
//DRC 心跳
// function heartBeat() {
//   let seq = 0
//   timeHeartBeat = setInterval(() => {
//     console.log(useMyWebSocket().status.value, 'DRC 心跳')
//     // instructPost({
//     //   ...aircraftControl, instuct: 'heart_beat', action: {
//     //     seq: sql++,
//     //     timestamp: Date.now()
//     //   }
//     // })

//     const pamse = {
//       bid: Math.floor(Math.random() * 1000000000),
//       code: "INSTRUCT",
//       data: {
//         deviceId: data.value.deviceId,
//         deviceSn: data.value.deviceSn,
//         instuct: 'heart_beat',
//         reqId: localStorage.getItem('wsClientId'),
//         action: {
//           seq: seq++,
//           timestamp: Date.now()
//         }
//       }
//     }

//     useMyWebSocket().send(JSON.stringify(pamse))

//     if (useMyWebSocket().status.value != 'OPEN') {
//       clearInterval(timeHeartBeat)
//     }
//   }, 5000)
// }

function mapInit() {
  AMapLoader.load({
    key: "59c61f064c552f2ace25ff0c1d6465a7",
  }).then((AMap) => {
    map = new AMap.Map("container", {
      // 设置地图容器id
      // viewMode: "3D", // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: aircraftCardin.value[0], // 初始化地图中心点位置
    });

    marker.value = new AMap.Marker({
      map: map,
      // zoom: 15,
      position: aircraftCardin.value[0],
      // icon: "https://webapi.amap.com/images/car.png",
      icon: aircraft_icon1,
      offset: new AMap.Pixel(-30, -30),
      autoRotation: true,
      // angle: -90,
      // content: `<div>6666666666666</div>`
    });


    // 绘制轨迹
    polyline.value = new AMap.Polyline({
      map: map,
      path: aircraftCardin.value,
      showDir: true,
      strokeColor: "#28F",  //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6,      //线宽
      // strokeStyle: "solid"  //线样式
    });
    map.setFitView()
    map.setCenter();
  }).catch((e) => {
    console.log(e);
  });
}

// 摇杆初始化
function rockerInit() {
  joystick.value = Nipple.create({
    zone: joystickContainer.value,
    mode: 'static',
    position: { top: '50%', left: '50%' },
    color: 'red',
    size: 100,
  })

  joystickTwo.value = Nipple.create({
    zone: joystickContainerTwo.value,
    mode: 'static',
    position: { top: '50%', left: '50%' },
    color: 'red',
    size: 100,
  })

  joystick.value.on('move', (evt, data) => {
    // 处理摇杆移动事件
    if (rockerDirect.value != data.direction.angle) {
      rockerDirect.value = data.direction.angle
      executeInstruct()
    }
  })

  joystickTwo.value.on('move', (evt, data) => {
    // 处理摇杆移动事件
    if (rockerDirectTwo.value != data.direction.angle) {
      rockerDirectTwo.value = data.direction.angle
      executeInstructTwo()
    }
  })

  joystick.value.on('end', (evt, data) => {
    //停止滑动摇杆的事件
    console.log(data, '停止了')
    rockerDirect.value = null
    stopInstruct()
    // console.log(joystick.value, 'joystick.value')
  })

  joystickTwo.value.on('end', (evt, data) => {
    //停止滑动摇杆的事件
    console.log(data, '停止了')
    rockerDirectTwo.value = null
    stopInstructTwo()
    // console.log(joystick.value, 'joystick.value')
  })
}

function convertKBToGB(kb) {
  const gb = kb / (1024 * 1024); // 1 GB = 1024 MB, 1 MB = 1024 KB
  return gb.toFixed(2); // 四舍五入到两位小数
}

//解锁遥控器 按钮
async function unlockButton() {
  //进入指令飞行控制模式  进入页面就要执行
  await modeEnter({ ...aircraftControl, instuct: 'drc_mode_enter', action: { payload_index: payload_index.value } })
  lock.value = false
}

let time: ReturnType<typeof setInterval>;
function executeInstruct() { //执行
  // console.log('执行了')
  if (time) {
    clearInterval(time)
  }
  const Params = {
    h: 0,
    w: 0,
    x: 0,
    y: 0,
  }

  time = setInterval(() => {
    // seq.value++
    if (rockerDirect.value == 'up') {
      Params.h = heightBlock.value == 1 ? 1 : heightBlock.value == 2 ? 2 : 4
      Params.w = 0
      Params.x = 0
      Params.y = 0
      console.log(`飞机上升，速度为${heightBlock.value == 1 ? '1' : heightBlock.value == 2 ? '2' : '4'}`, Params)
    }
    if (rockerDirect.value == 'down') {
      Params.h = heightBlock.value == 1 ? -1 : heightBlock.value == 2 ? -2 : -4
      Params.w = 0
      Params.x = 0
      Params.y = 0
      console.log(`飞机下降，速度为${heightBlock.value == 1 ? '1' : heightBlock.value == 2 ? '2' : '4'}`, Params)
    }
    if (rockerDirect.value == 'left') {
      Params.h = 0
      Params.w = aircraftAnglBlock.value == 1 ? -10 : aircraftAnglBlock.value == 2 ? -30 : -60
      Params.x = 0
      Params.y = 0
      console.log(`飞机左转，角度为${aircraftAnglBlock.value == 1 ? '10' : aircraftAnglBlock.value == 2 ? '30' : '60'}`)
    }
    if (rockerDirect.value == 'right') {
      Params.h = 0
      Params.w = aircraftAnglBlock.value == 1 ? 10 : aircraftAnglBlock.value == 2 ? 30 : 60
      Params.x = 0
      Params.y = 0
      console.log(`飞机右转，角度为${aircraftAnglBlock.value == 1 ? '10' : aircraftAnglBlock.value == 2 ? '30' : '60'}`)
    }

    drcControl({ ...aircraftControl, instuct: 'drone_control', ...Params, seq: seq.value })
    // console.log(seq.value, '执行了')
  }, 1000)
}

let timeTwo: ReturnType<typeof setInterval>;
function executeInstructTwo() { //执行
  // console.log('执行了')
  if (timeTwo) {
    clearInterval(timeTwo)
  }
  const Params = {
    h: 0,
    w: 0,
    x: 0,
    y: 0,
  }

  timeTwo = setInterval(() => {
    // seq.value++
    if (rockerDirectTwo.value == 'up') {
      Params.h = 0
      Params.w = 0
      Params.x = heightBlock.value == 1 ? 1 : heightBlock.value == 2 ? 9 : 14
      Params.y = 0
      console.log(`飞机前进，速度为${heightBlock.value == 1 ? '1' : heightBlock.value == 2 ? '9' : '14'}`, Params)
    }
    if (rockerDirectTwo.value == 'down') {
      Params.h = 0
      Params.w = 0
      Params.x = heightBlock.value == 1 ? -1 : heightBlock.value == 2 ? -9 : -14
      Params.y = 0
      console.log(`飞机后退，速度为${heightBlock.value == 1 ? '-1' : heightBlock.value == 2 ? '-9' : '-14'}`, Params)
    }
    if (rockerDirectTwo.value == 'left') {
      Params.h = 0
      Params.w = 0
      Params.x = 0
      Params.y = heightBlock.value == 1 ? -1 : heightBlock.value == 2 ? -9 : -14
      console.log(`飞机左，速度为${aircraftAnglBlock.value == 1 ? '-1' : aircraftAnglBlock.value == 2 ? '-9' : '-14'}`)
    }
    if (rockerDirectTwo.value == 'right') {
      Params.h = 0
      Params.w = 0
      Params.x = 0
      Params.y = heightBlock.value == 1 ? 1 : heightBlock.value == 2 ? 9 : 14
      console.log(`飞机右，速度为${aircraftAnglBlock.value == 1 ? '1' : aircraftAnglBlock.value == 2 ? '9' : '14'}`)
    }

    drcControl({ ...aircraftControl, instuct: 'drone_control', ...Params, seq: seq.value })
    // console.log(seq.value, '执行了')
  }, 1000)
}

function stopInstruct() { //停止  左摇杆
  if (time) {
    clearInterval(time)
    seq.value = 0
  }
}

function stopInstructTwo() { //停止  右摇杆
  if (timeTwo) {
    clearInterval(timeTwo)
    seq.value = 0
  }
}


//锁定按钮
function lockButton() {
  lock.value = true
  modeExit({ ...aircraftControl, instuct: 'drc_mode_exit', action: { payload_index: payload_index.value } })
}

//飞机速度
function aircraftAltitude(val) {
  heightBlock.value = val
}

//飞机角度
function aircraftAngl(val) {
  aircraftAnglBlock.value = val
}

//回归航线
function returnRout() {
  instructPost({ ...aircraftControl, instuct: 'flighttask_recovery' })
}

//变焦
function cameraZoom() {
  zoomPop.value = !zoomPop.value
}

//变焦滑块change 事件  输入框也绑定了
let timeSlider: ReturnType<typeof setTimeout>;
function SliderChange(event) {
  if (timeSlider) {
    clearTimeout(timeSlider)
  }
  timeSlider = setTimeout(() => {
    instructPost({ ...aircraftControl, instuct: 'camera_focal_length_set', action: { camera_type: 'zoom', payload_index: payload_index.value, zoom_factor: zoomMultiple.value } })
    console.log(event)
  }, 1000)
}

//切换相机  设置直播镜头
function switchCamera(type: string) {
  currentCamera.value = type
  console.log(type)
  if (type == 'zoom') {
    instructPost({ ...aircraftControl, instuct: 'camera_focal_length_set', action: { camera_type: 'zoom', payload_index: payload_index.value, zoom_factor: 10 } }) //镜头设置为变焦  给一个默认值10
  }
  setLen({
    deviceLiveId: liveInform.deviceLiveId,
    videoType: type,
    videoQuality: 4,
    cameraId: payload_index.value,
  })
}

//一键起飞
async function takeOff() {
  await instructTakeoff({ ...aircraftControl, instuct: 'takeoff_to_point' })
}

//重置云台
function resetHead() {
  instructPost({ ...aircraftControl, instuct: 'gimbal_reset', action: { payload_index: payload_index.value, reset_mode: 0 } })
}

//飞行器急停
function aircraftEmergeStop() {
  instructPost({ ...aircraftControl, instuct: 'drone_emergency_stop' })
}

//一键返航
function returnHome() {
  instructPost({ ...aircraftControl, instuct: 'return_home' })
}

//拍照  照相
function picture() {
  instructPost({ ...aircraftControl, instuct: 'camera_photo_take', action: { payload_index: payload_index.value } })
}

//录像
function videoRecord() {
  //recording_state{"0":"空闲","1":"录像中"}

  if (navInform.recording_state == '1') {
    //停止录像
    instructPost({ ...aircraftControl, instuct: 'camera_recording_stop', action: { payload_index: payload_index.value } })
    navInform.recording_state = '0'
  } else {
    //切换相机为录像模式0拍照  1录像
    instructPost({ ...aircraftControl, instuct: 'camera_mode_switch', action: { camera_mode: 1, payload_index: payload_index.value } })
    //开始录像
    instructPost({ ...aircraftControl, instuct: 'camera_recording_start', action: { payload_index: payload_index.value } })
    navInform.recording_state = '1'
  }
}

//退出
function exitButton() {
  let params = {
    deviceLiveId: liveInform.deviceLiveId,  //1716784697489170434
    deviceSn: navStatusData.value.deviceSn,
  }
  if (params.deviceLiveId) {
    stopLive(params) //关闭直播
  }

  let params2 = {
    deviceLiveId: liveInformTwo.deviceLiveId,  //1716784697489170434
    deviceSn: navStatusData.value.deviceSn,
  }
  if (params2.deviceLiveId) {
    stopLive(params2)
  }
  // instructPost({ ...aircraftControl, instuct: 'drc_mode_exit' })
  modeExit({ ...aircraftControl, instuct: 'drc_mode_exit', action: { payload_index: payload_index.value } })
  routerR.go(-1)
}

function swapElements(a, b) {
  // debugger
  if (a == b) return;
  //记录父元素
  var bp = b.parentNode, ap = a.parentNode;
  //记录下一个同级元素
  var an = a.nextElementSibling, bn = b.nextElementSibling;
  // 如果 b 是 a 的子元素，将 b 插入到 a 之前（在 b 的当前父元素中）
  if (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_CONTAINED_BY) {
    ap.insertBefore(b, a);
    // 将 a 插入到 b 之后（在 b 的当前父元素中）
    bp.insertBefore(a, bn);
  } else {
    // 在各自的父元素中交换元素位置
    bp.insertBefore(a, b);
    ap.insertBefore(b, an);
  }
}

function fullScreenVideo() {
  // let mapDom = document.querySelector('.mapBox'); // 使用 querySelector 获取第一个匹配的元素
  // let videoDom = document.querySelector('.remoteOverBox');

  let mapDom = document.getElementById('liveBroadcastPicture');
  let videoDom = document.getElementById('liveBroadcastPictureTwo');
  swapElements(mapDom, videoDom);

  // document.body.style.transform = 'scale(0.8)'; // 调整为适当的缩放比例
}


// function initWebSocket() {
//   const userStore = useUserStore();
//   let token = getToken();
//   //将登录token生成一个短的标识
//   let wsClientId = md5(token);
//   let userId = unref(userStore.getUserInfo).id + "_" + wsClientId;
//   localStorage.setItem('wsClientId', wsClientId);
//   let url = 'ws://192.168.161.107:7002' + '/websocket/' + userId;

//   connectWebSocket(url);
// }


onMounted(() => {
  aircraftControl.reqId = localStorage.getItem('wsClientId')

  //获取数据
  getDataInit()

  //摇杆初始化
  rockerInit()

  //地图
  mapInit()

  //
  getFlightParapet()

  // 监听键盘事件
  window.addEventListener('keydown', handleKeyDown)
  window.addEventListener('keyup', handleKeyUp)


})

onUnmounted(() => {
  clearInterval(timegetFlightParapet)
  console.info('页面销毁')
})

const handleKeyDown = (event) => {
  if (event.key === 'w' && !isJoystickActive.value) {
    // 向前移动逻辑，可以根据需求自定义
    isJoystickActive.value = true;
  }
}

const handleKeyUp = (event) => {
  if (event.key === 'w' && isJoystickActive.value) {
    // 还原虚拟摇杆
    isJoystickActive.value = false;
  }
}



</script>
<style lang="less" scoped>
img {
  -webkit-user-drag: none;
}

* {
  user-select: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.disabledCursor {
  cursor: no-drop;
}

.liveBroadcastPictureTwo {
  width: 100%;
  height: 100%;
}

.liveBroadcastPicture {
  width: 100%;
  height: 100%;
}

.custom-joystick-container {
  /deep/ .nipple {
    opacity: 1 !important;
  }

  /deep/ .back {
    background: url('@/assets/icons/remoteOver/rockerWheel.png') no-repeat !important;
    width: 118px !important;
    height: 118px !important;
    margin-left: -60px !important;
    margin-top: -60px !important;
    opacity: 1 !important;
  }

  /deep/ .front {
    // background: rgb(0, 255, 0) !important;
    background: url('@/assets/icons/remoteOver/rockerButton.png') no-repeat !important;
    width: 74px !important;
    height: 75px !important;
    margin-left: -37px !important;
    margin-top: -37px !important;
    opacity: 1 !important;
  }
}

.mapBox {
  width: 270px;
  height: 155px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.09);
  border-radius: 4px;
  // border: 3px solid #FFFFFF;
  background-color: #FFFFFF;
  padding: 3px;
  cursor: all-scroll;
  position: absolute;
  right: 95px;
  top: 73px;
  user-select: none;
  z-index: 5;

  #container {
    width: 100%;
    height: 100%;
  }

  .moveBox {
    position: absolute;
    z-index: 6;
    width: 24px;
    height: 24px;
    background: #8D8D8D;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    opacity: 0.39;
    right: 4px;
    top: 6px;
  }
}

.buttonPicture {
  // opacity: 0.5;
}

.remoteOverBox {
  height: 100vh;
  width: 100vw;
  background-color: black;
  position: relative;

  .remoteOver {
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    height: 47px;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 5;

    flex-direction: column;
    align-items: center;

    .statusBarBox {
      height: 47px;
      display: flex;
      align-items: center;

      .nameAirportBox {
        display: flex;
        align-items: center;
        margin-right: 14px;

        .img {
          width: 22px;
          height: 22px;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .Title {
          font-weight: 400;
          color: #FFFFFF;
          font-size: 16px;
        }
      }

      .flightStateBox {
        font-weight: 400;
        color: #7DCDFF;
        font-size: 12px;
        display: flex;
        align-items: center;
        background: linear-gradient(127deg, rgba(130, 216, 255, 0.2) 0%, rgba(47, 158, 255, 0.4) 100%);
        border: 1px solid rgba(47, 158, 255, 0.5);
        border-radius: 1px;
        padding: 4px 8px;
        margin-right: 20px;

        .StateTitle {}

        .ericLine {
          margin-left: 5px;
          margin-right: 5px;
          width: 1px;
          height: 12px;
          background-color: #7DCDFF;

        }

        .StateName {}
      }

      .aircraftModelBox {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2c333b;
        border-radius: 1px;
        // width: 68px;
        padding: 0 5px;
        margin-right: 20px;

        .img {
          width: 24px;
          height: 24px;

          img {
            width: 24px;
            height: 100%;
          }
        }

        .text {
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 22px;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .aircraftModelBox2 {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2c333b;
        border-radius: 1px;
        // width: 70px;
        padding: 0 5px;
        margin-right: 20px;

        .img {
          width: 24px;
          height: 24px;

          img {
            width: 24px;
            height: 100%;
          }
        }

        .text {
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 22px;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .taskPerformBox {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .img {
          width: 24px;
          margin-right: 8px;

          img {
            width: 24px;
          }
        }

        .text {
          font-weight: 400;
          color: #FFFFFF;
          font-size: 14px;
        }
      }

      .cityInspectRoutBox {
        display: flex;
        align-items: center;
        margin-right: 12px;

        .img {
          width: 24px;
          margin-right: 9px;

          img {
            width: 24px;
          }
        }

        .text {
          font-weight: 400;
          color: #FFFFFF;
          font-size: 14px;
          margin-right: 22px;
        }

      }

      .batteryInformBox {
        display: flex;
        align-items: center;
        margin-left: 22px;

        .batteryBox {
          display: flex;
          align-items: center;
          margin-right: 8px;

          .battery {
            width: 32px;
            height: 17px;
            border: 1px solid #FFFFFF;
            border-radius: 5px;
            overflow: hidden;
            padding: 1px;

            .progress {
              width: 0%;
              height: 100%;
              border-radius: 3px;
              background-color: #FFFFFF;
            }
          }

          .head {
            width: 3px;
            height: 5px;
            background: #FFFFFF;
            border-radius: 1px;
          }
        }

        .electroQuantity {
          font-weight: 600;
          color: #FFFFFF;
          font-size: 14px;
        }
      }

      .navInformBox {
        display: flex;
        align-items: center;
        gap: 22px;

        .navInform {
          display: flex;
          align-items: center;

          .Img {
            width: 24px;
            margin-right: 3px;

            img {
              width: 100%;
            }
          }

          .Text {
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
          }
        }
      }
    }

    .flightSchedule {
      width: 100%;
      position: relative;

      .progressTwo {
        width: 50%;
        height: 6px;
        background-color: #FF5656;
        position: relative;
      }

      .progressTwo::after {
        content: 'H';
        position: absolute;
        top: -7px;
        right: 0px;

        border-radius: 100%;
        width: 18px;
        height: 18px;
        background-color: #FF9861;
        border: 1px solid #FFFFFF;
        text-align: center;
        line-height: 16px;
        color: white;
      }

      .progress {
        width: 100%;
        height: 6px;
        background-color: #17d2a3;
        position: absolute;
        top: 0px;
        z-index: -1;
      }
    }
  }

  .quitBox {
    position: absolute;
    width: 45px;
    top: 84px;
    left: 40px;
    cursor: pointer;
    opacity: 0.5;

    img {
      width: 100%;
    }
  }

  .quitBox:hover {
    opacity: 1;
  }

  .photoVideoRecordBox {
    position: absolute;
    right: 30px;
    top: 300px;
    z-index: 5;

    .videoRecordBoxNormal {
      // background: linear-gradient(180deg, rgba(147, 214, 255, 0.8) 0%, rgba(73, 149, 225, 0.8) 100%);
      background: linear-gradient(180deg, rgba(147, 214, 255, 0.4) 0%, rgba(73, 149, 225, 0.16) 100%);
    }

    .videoRecordBoxActive {
      background: linear-gradient(180deg, rgba(147, 214, 255, 0.8) 0%, rgba(73, 149, 225, 0.8) 100%);
      // background: linear-gradient(180deg, rgba(147, 214, 255, 0.4) 0%, rgba(73, 149, 225, 0.16) 100%);
    }

    .videoRecordBox:hover {
      // background: linear-gradient(180deg, rgba(147, 214, 255, ) 0%, rgba(73, 149, 225, ) 100%);
      border: 1px solid #D3D3D3;
    }

    .videoRecordBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 4px;
      border: 1px solid transparent;
      width: 57px;
      height: 55px;
      margin-bottom: 17px;
      cursor: pointer;

      .img {
        width: 24px;

        img {
          width: 24px;
        }
      }

      .text {
        font-weight: 400;
        color: #FFFFFF;
        font-size: 14px;
        margin-bottom: 2px;
      }

      .badge {
        background: rgb(66, 255, 202);
        display: inline-block;
        width: 4px;
        height: 4px;
        vertical-align: middle;
        border-radius: 50%;
      }
    }

    .pictureBox {

      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(180deg, rgba(147, 214, 255, 0.4) 0%, rgba(73, 149, 225, 0.16) 100%);
      border-radius: 4px;
      border: 1px solid transparent;

      width: 57px;
      height: 47px;
      cursor: pointer;

      .img {
        width: 24px;

        img {
          width: 24px;
        }
      }

      .text {
        font-weight: 400;
        color: #FFFFFF;
        font-size: 14px;
        margin-bottom: 2px;
      }
    }

    .pictureBox:hover {
      border: 1px solid #D3D3D3;
    }
  }

  .cameraModeBox {
    position: absolute;
    right: 30px;
    top: 432px;
    z-index: 5;

    width: 57px;
    height: 157px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(147, 214, 255, 0.3) 0%, rgba(73, 149, 225, 0.18) 100%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .cameraMode {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50px;
      height: 44px;
      cursor: pointer;
      border-radius: 4px;

      .text {
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
      }
    }

    .cameraMode:hover {
      border: 1px solid #D3D3D3;
    }

    .cameraModeBg {
      background: linear-gradient(146deg, #5DAAFF 0%, #3D88F5 100%);
      border-radius: 4px;
    }
  }

  .emergeStopReturnBox {
    position: absolute;
    right: 30px;
    bottom: 98px;
    z-index: 5;

    .suddenStop {
      background: linear-gradient(180deg, rgba(255, 166, 166, 0.4) 0%, rgba(225, 73, 73, 0.16) 100%);
      border-radius: 4px;
      padding: 0 15px;
      margin-bottom: 15px;
      cursor: pointer;
      opacity: 0.5;

      .img {
        width: 24px;

        img {
          width: 100%;
        }
      }

      .text {
        font-size: 12px;
        font-weight: 400;
        color: #FF5656;
      }
    }

    .suddenStop:hover {
      opacity: 1;
    }

    .returnVoyage {
      background: linear-gradient(180deg, rgba(147, 255, 253, 0.4) 0%, rgba(73, 149, 225, 0.16) 100%);
      border-radius: 4px;
      padding: 0 15px;
      cursor: pointer;
      opacity: 0.5;

      .img {
        width: 24px;

        img {
          width: 100%;
        }
      }

      .text {
        font-size: 12px;
        font-weight: 400;
        color: #93FFFD;
      }
    }

    .returnVoyage:hover {
      opacity: 1;
    }
  }


  .dronePicture {
    width: 1670px;
    height: 100%;
    margin: 0 auto;
    position: relative;

    #liveBroadcastPicture {
      // position: relative;
    }

    // background-color: #d1b9bf;
  }

  .dronePictureTwo {
    position: absolute;
    width: 270px;
    height: 155px;
    background-color: #FFFFFF;
    left: 95px;
    top: 73px;
    z-index: 5;
    border: 2px solid #FFFFFF;

    .toggleButton {
      position: absolute;
      z-index: 6;
      width: 24px;
      height: 24px;
      background: #8D8D8D;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      opacity: 0.39;
    }
  }

  .BottomControlBox {
    position: absolute;
    transform: translate(-50%, 0%);
    left: 50%;
    bottom: 20px;
    display: flex;
    align-items: center;
    z-index: 5;

    .ControlLeft {
      margin-top: 33px;
      display: flex;
      align-items: center;
      gap: 24px;
      position: relative;

      .buttonPicture {
        width: 76px;
        cursor: pointer;

        img {
          width: 100%;
        }
      }

      .fade-enter-active,
      .fade-leave-active {
        // transition: opacity 0.5s;
        transition: transform 0.2s, opacity 0.5s;
      }

      .fade-enter,
      .fade-leave-to {
        // transform: translateY(100%);
        opacity: 0;
      }

      .zoomBox {
        width: 70px;
        height: 175px;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);

        position: absolute;
        left: 102px;
        bottom: 83px;
        padding: 7px 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          font-size: 12px;
          font-weight: 500;
          color: #FFFFFF;
          margin-bottom: 6px;
        }

        .zoomInp {
          /deep/.ant-input {
            width: 37px;
            height: 20px;
            border-radius: 2px;
            border: 1px solid #636363;
            padding: 2px 5px;
            background-color: transparent;
            color: #FFFFFF;
            text-align: center;
          }
        }

        .zoomInp::before {
          content: '×';
          color: #FFFFFF;
          font-size: 18px;
          position: absolute;
          top: 29px;
          left: 2px;
        }

        .zoomSlider {
          height: 100px;

          /deep/.ant-slider-rail {
            width: 8px;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.8);
          }

          /deep/ .ant-slider-track {
            width: 8px;
            background: linear-gradient(146deg, #5DAAFF 0%, #3D88F5 100%);
          }

          /deep/ .ant-slider-handle {
            width: 16px;
            height: 11px;
            background: linear-gradient(180deg, #FFFFFF 0%, #D8D8D8 100%);
            margin-left: -4px;
            border-radius: 1px;
            border: none
          }
        }
      }
    }

    .ControlCentre {
      margin: 0 30px;
      position: relative;

      .controlBox {
        width: 568.68px;
        height: 156px;
        background-image: url('@/assets/icons/remoteOver/droneOverButton_icon07.png');
        background-size: cover;
        background-repeat: no-repeat;

        .leftStickBox {
          position: absolute;
          left: 68px;
          top: 93px;
        }

        .rigthStickBox {
          position: absolute;
          right: 68px;
          top: 93px;
        }

        .aircraftAltitudeBox {
          position: absolute;
          top: 35px;
          left: 138px;
          width: 57px;
          height: 111px;
          background: rgba(100, 100, 100, 0.3);
          border-radius: 9px;
          backdrop-filter: blur(10px);
          padding: 10px 5px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .smallPlaneIcon {
            width: 24px;

            img {
              width: 100%;
            }
          }

          .speedSelect {
            background: linear-gradient(270deg, rgba(32, 137, 249, 0.7) 0%, rgba(69, 230, 254, 0.7) 100%) !important;
            box-shadow: 0px 2px 4px 0px rgba(228, 249, 255, 0.19), inset 0px 1px 3px 0px rgba(232, 253, 255, 0.5) !important;
          }

          .speed {
            font-weight: 400;
            color: #FFFFFF;
            font-size: 12px;
            text-align: center;

            width: 48px;
            height: 20px;

            border-radius: 12px;
            border: 1px solid transparent;
            margin-bottom: 5px;
          }

          .speed:hover {
            // background: linear-gradient(270deg, rgba(32, 137, 249, 0.3) 0%, rgba(69, 230, 254, 0.3) 100%);
            background: rgba(67, 224, 247, 0.1);
            border: 1px solid rgba(134, 224, 255, 0.1);
          }

        }

        .aircraftAnglBox {
          position: absolute;
          top: 35px;
          right: 138px;
          width: 57px;
          height: 111px;
          background: rgba(100, 100, 100, 0.3);
          border-radius: 9px;
          backdrop-filter: blur(10px);
          padding: 10px 5px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .smallPlaneIcon {
            width: 24px;

            img {
              width: 100%;
            }
          }

          .speedSelect {
            background: linear-gradient(270deg, rgba(32, 137, 249, 0.7) 0%, rgba(69, 230, 254, 0.7) 100%) !important;
            box-shadow: 0px 2px 4px 0px rgba(228, 249, 255, 0.19), inset 0px 1px 3px 0px rgba(232, 253, 255, 0.5) !important;
          }

          .speed {
            font-weight: 400;
            color: #FFFFFF;
            font-size: 12px;
            text-align: center;

            width: 48px;
            height: 20px;

            border-radius: 12px;
            border: 1px solid transparent;
            margin-bottom: 5px;
          }

          .speed:hover {
            // background: linear-gradient(270deg, rgba(32, 137, 249, 0.3) 0%, rgba(69, 230, 254, 0.3) 100%);
            background: rgba(67, 224, 247, 0.1);
            border: 1px solid rgba(134, 224, 255, 0.1);
          }

        }

        .directBox {
          width: 137px;
          height: 137px;
          position: absolute;
          left: 213px;
          top: 7px;
          transition: transform 0.5s;
          // transform: rotate(0deg);

          img {
            width: 100%;
            height: 100%;
          }
        }

        .smallPlaneBox {
          position: absolute;
          left: 236px;
          top: 3px;

          .angl {
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
            line-height: 30px;

          }
        }

      }

      .lockRemoteControlBox {
        position: absolute;
        width: 579px;
        height: 161px;
        top: -3px;
        left: -7px;
        z-index: 999;
        backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;

        .unlockBox {
          width: 76px;
          border-radius: 100%;
          cursor: pointer;
          background: radial-gradient(circle, #3498db, transparent);
          animation: breathing-border 3s infinite;

          img {
            width: 100%;
          }
        }

        @keyframes breathing-border {
          // 0% {
          //   box-shadow: 0 0 10px 0 rgba(52, 152, 219, 0.7);
          // }

          // 50% {
          //   box-shadow: 0 0 20px 5px rgba(52, 152, 219, 0.3);
          // }

          // 100% {
          //   box-shadow: 0 0 10px 0 rgba(52, 152, 219, 0.7);
          // }

          0% {
            box-shadow: 0 0 20px 0 rgba(52, 152, 219, 1);
          }

          50% {
            box-shadow: 0 0 40px 5px rgba(52, 152, 219, 1);
          }

          100% {
            box-shadow: 0 0 20px 0 rgba(52, 152, 219, 1);
          }
        }


      }
    }

    .ControlRigth {
      margin-top: 33px;
      display: flex;
      align-items: center;
      gap: 24px;

      .buttonPicture {
        width: 76px;

        img {
          width: 100%;
        }
      }
    }
  }

}
</style>
